<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../dist/mermaid.forest.css"/>
    <script src="../dist/mermaid.js"></script>
    <script>
        var mermaid_config = {
            startOnLoad:true,
            htmlLabels:true
        }
        mermaid.sequenceConfig = {
            diagramMarginX:50,
            diagramMarginY:10,
            boxTextMargin:5,
            noteMargin:10,
            messageMargin:35,
            mirrorActors:true,
            width:150,
            // Height of actor boxes
            height:30
        };
        mermaid.ganttConfig = {
            titleTopMargin:25,
            barHeight:20,
            barGap:4,
            topPadding:50,
            leftPadding:100,
            gridLineStartPadding:35,
            fontSize:11,
            numberSectionStyles:4,
            axisFormatter: [
                // Within a day
                ["%I:%M", function (d) {
                    return d.getHours();
                }],
                // Monday a week
                ["w. %U", function (d) {
                    return d.getDay() == 1;
                }],
                // Day within a week (not monday)
                ["%a %d", function (d) {
                    return d.getDay() && d.getDate() != 1;
                }],
                // within a month
                ["%b %d", function (d) {
                    return d.getDate() != 1;
                }],
                // Month
                ["%m-%y", function (d) {
                    return d.getMonth();
                }]
            ]
        };

        mermaid.startOnLoad=true;
    </script>

    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

</head>
    <body>
    <div class="mermaid">graph LR
        subgraph old sys 1
        a1(new client)-->b1(sys1 server)
        oc1(Old client)-->b2
        end

        subgraph old sys 2
        a2(new client)-->b2(sys2 server)
        oc2(Old client)-->b2
        end

        subgraph old sys 3
        a3(new client)-->b3(sys3 server)
        end

        subgraph New sys
        a1
        a2
        a3
        end
    </div>
    <hr/>
    <div  class="mermaid">
        graph LR;
        A[Now with default style on links]--v-->B{a = '1,2'}
        B-->|v|C[v]
        B-- ... default style on links -->Z>My default thing this]
        C-->D{condition};

        linkStyle 0 stroke-width:2px,fill:none,stroke:blue;
        linkStyle default stroke-width:2px,fill:none,stroke:red;

    </div>
    <hr/>
    <div class="mermaid">
        graph LR
        A[Square Rect]  --      Link text      -->       B((Circle))
        A[Square Rect]--v-->D((Circle))
        A --> C(Round Rect)
        B    ==  testing ==>     D{Rhombus}
        C-.->D
    </div>
    <hr/>
    <div class="mermaid">
        sequenceDiagram
        participant Alice
        participant Bob
        participant John the Long
        Alice->>Bob: Hello Bob, how are you?
        loop Outer loop
        Note left of Alice: Bob thinks about <br/> things <br/> to think about
        Bob-xBob: I am good thanks!
        loop Inner loop
        Bob->>John the Long: How about you John?
        Note right of John the Long: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit.
        end
        end

        Bob-->>Alice: Checking with John...
        Alice->>John the Long: Yes... John, how are you?
        John the Long-->>Alice: Super!
    </div>
    <hr/>
    <div class="mermaid">
        gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid

        section A section
        Completed task            :done,    des1, 2014-01-06,2014-01-08
        Active task               :active,  des2, 2014-01-09, 3d
        Future task               :         des3, after des2, 5d
        Future task2               :         des4, after des3, 5d

        section Critical tasks
        Completed task in the critical line :crit, done, 2014-01-06,24h
        Implement parser and jison          :crit, done, after des1, 2d
        Create tests for parser             :crit, active, 3d
        Future task in critical line        :crit, 5d
        Create tests for renderer           :2d
        Add to mermaid                      :1d

        section Documentation
        Describe gantt syntax               :active, a1, after des1, 3d
        Add gantt diagram to demo page      :after a1  , 20h
        Add another diagram to demo page    :doc1, after a1  , 48h

        section Last section
        Describe gantt syntax               :after doc1, 3d
        Add gantt diagram to demo page      : 20h
        Add another diagram to demo page    : 48h
    </div>
    <div class="mermaid">
        info
    </div>
    </body>
</html>
